//@import '../../../var';
@import '../../../style/theme/index';
@import '../mixin';

@include theme {
  //@debug "$colorPrimary ---- ---- --- #{$colorPrimary}";

  .md {
    ol, p, ul {
      line-height: 1.7;
    }

    strong {
      font-weight: 600
    }

    hr {
      border: 0;
      border-top: 1px solid #eaecef
    }

    box-sizing: border-box;
  }

  /*--------------------------------------- code -------------------------------------------*/
  .md {
    p code, li > code, td code {
      color: #476582;
      padding: .2rem .5rem;
      font-size: .85em;
      background-color: rgba(27, 31, 35, .05);
      border-radius: 3px;
      font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
      margin: 0 0.5rem;
    }
  }

  /*--------------------------------------- highlight -------------------------------------------*/
  .md {
    pre {
      margin: 0;
    }

    .hljs {
      display: block;
      overflow-x: auto;
      padding: .5em;
      background: #2b2b2b;
      color: #bababa
    }

    .hljs-strong, .hljs-emphasis {
      color: #a8a8a2
    }

    .hljs-bullet, .hljs-quote, .hljs-link, .hljs-number, .hljs-regexp, .hljs-literal {
      color: #6896ba
    }

    .hljs-code, .hljs-selector-class {
      color: #a6e22e
    }

    .hljs-emphasis {
      font-style: italic
    }

    .hljs-keyword, .hljs-selector-tag, .hljs-section, .hljs-attribute, .hljs-name, .hljs-variable {
      color: #cb7832
    }

    .hljs-params {
      color: #b9b9b9
    }

    .hljs-string {
      color: #6a8759
    }

    .hljs-subst, .hljs-type, .hljs-built_in, .hljs-builtin-name, .hljs-symbol, .hljs-selector-id, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-template-tag, .hljs-template-variable, .hljs-addition {
      color: #e0c46c
    }

    .hljs-comment, .hljs-deletion, .hljs-meta {
      color: #7f7f7f
    }

    /*--------------------------------------- 行号 和 隔行变色 -------------------------------------------*/
    .hljs ul {
      list-style: decimal;
      margin: 0 0 0 40px !important;
      padding: 0
    }
    .hljs li {
      list-style: decimal-leading-zero;
      border-left: 1px solid #111 !important;
      padding: 2px 5px !important;
      margin: 0 !important;
      line-height: 14px;
      width: 100%;
      box-sizing: border-box
    }
    .hljs li:nth-of-type(even) {
      background-color: rgba(255, 255, 255, .015);
      color: inherit
    }
  }

  /*--------------------------------------- blockquote -------------------------------------------*/
  .md {
    blockquote {
      font-size: 1rem;
      color: #999;
      border-left: .25rem solid #bcbcbc;
      margin-left: 0;
      margin-right: 0;
      font-style: italic;
      background-color: #f6f6f6;
      padding: 0.5rem 1rem;

      & > p {
        margin: 0;
      }
    }
  }

  /*--------------------------------------- list -------------------------------------------*/
  .md {
    ol, p, ul {
      line-height: 1.7;
    }

    ol, ul {
      padding-left: 1.2em;
    }
  }


  /*--------------------------------------- a -------------------------------------------*/
  .md {
    a {
      font-weight: 500;
      text-decoration: none;
    }

    a, p a code {
      color: $colorPrimary;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  /*--------------------------------------- header -------------------------------------------*/
  .md {
    h1, h2, h3, h4, h5, h6 {
      font-weight: 600;
      line-height: 1.25;

      @include anchor();
    }

    h1 {
      font-size: 2.2rem;
    }

    h2 {
      font-size: 1.65rem;
      padding-bottom: .3rem;
      border-bottom: 1px solid #eaecef;
    }

    h3 {
      font-size: 1.35rem
    }
  }

  /*--------------------------------------- custom block -------------------------------------------*/
  //:::warn 注意
  //注意的文本信息...
  //:::

  $block: (
    tip:#0079ff,
    success:#42b983,
    warn:#e7c000,
    error:#cc0000,
  );

  .md {
    .custom-block {
      margin: 1rem 0;
      padding: .1rem 1.5rem;
      border-left-width: .5rem;
      border-left-style: solid;

      & > p:first-child {
        font-weight: 600;
      }

      @each $blockName, $blockValue in $block {
        &.#{$blockName} {
          border-color: $blockValue;
          //Closer to `100%` gives more weight to `$color1`, closer to `0%` gives more weight to `$color2`
          background-color: mix($blockValue, white, 7%);
          color: mix($blockValue, black, 70%);

          .block-title {
            color: $blockValue;
            font-weight: bold;
          }
        }
      }
    }

  }

  /*--------------------------------------- table -------------------------------------------*/
  .md {
    table {
      font-size: 13px;
      border-collapse: collapse;
      border-spacing: 0;
      empty-cells: show;
      border: 1px solid #e9e9e9;
      width: 100%;
      box-sizing: border-box;

      td, th {
        border: 1px solid #e9e9e9;
        padding: 8px 8px;
        text-align: left;
        box-sizing: border-box;
        empty-cells: show;
        white-space: normal;
        overflow: hidden;
        word-break: break-word;
      }

      th {
        background: #f7f7f7;
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600;
      }

      ul {
        margin: 0;
      }

      code {
        background-color: rgba($colorPrimary, 0.1);
        color: $colorPrimary;
        padding: .15rem .5rem;
      }
    }
  }
}
